<template>
	<view>
		<view v-if="showSearch" style="z-index: 9999;" class="search_box" :class="{'search-fixed':fixed}"
			@tap.stop="close">
			<junjun-detepicker :format="format" @close="showTimePick1=false" @submit="getTime" :open="showTimePick1"
				:defalutDate="oldData.formObj[key1]?oldData.formObj[key1]:''"></junjun-detepicker>
			<junjun-detepicker :format="format" @close="showTimePick2=false" @submit="getTime" :open="showTimePick2"
				:defalutDate="oldData.formObj[key2]?oldData.formObj[key2]:''"></junjun-detepicker>
			<view @tap.stop="" :class="{'search_child_box':true,'search_box_transform':showSearch1}">
				<view class="search_title">
					筛选
				</view>
				<view class="search_main">
					<view v-for="(m,i) in oldData.other" :key="i">
						<view v-if="m.type == 'checkRadioBtn'">
							<view style="font-weight: 500;">{{m.label}}</view>
							<view class="content_box">
								<text class="my_search_btn"
									:style="{'background':JSON.parse(JSON.stringify(oldData.formObj[m.key]))==''?'#4070FF':'#F5F6FA','color':JSON.parse(JSON.stringify(oldData.formObj[m.key]))==''?'#FFF':'#000',width:'132rpx'}"
									@click="nature('',m.key)">全部</text>
								<view class="search_btns">
									<text class="my_search_btn" v-for="(item,index) in m.content"
										:style="{'background':oldData.formObj[m.key].indexOf(item.value)>-1?'#4070FF':'#F5F6FA','color':oldData.formObj[m.key].indexOf(item.value)>-1?'#FFF':'#000'}"
										@click="nature(item.value,m.key)">{{item.name}}</text>
								</view>
							</view>
						</view>
						<view v-if="m.type == 'duration'">
							<view style="font-weight: 500;">{{m.label}}</view>
							<view class="thsc">
								<input @input="input" type="number" :maxlength="m.maxLength || -1"
									v-model="oldData.formObj[m.key[0].key]"
									:placeholder="m.key[0].place?m.key[0].place:''" class="ipt" />-
								<input type="number" :maxlength="m.maxLength || -1"
									v-model="oldData.formObj[m.key[1].key]"
									:placeholder="m.key[1].place?m.key[1].place:''" class="ipt"
									style="margin-left: 10rpx;" />{{m.dw=='mm'?'分钟':'秒'}}
							</view>
						</view>
						<view v-if="m.type == 'timePicker'">
							<view style="font-weight: 500;">{{m.label}}</view>
							<view class="content_box">
								<view class="thsj" @click="showTimePickFun(1,m.key[0])">
									<view
										style="display: flex;align-items: center;line-height: 60rpx;color: #828282;font-size: 26rpx;">
										<u-icon name="order" size="28"></u-icon>
										{{JSON.parse(JSON.stringify(oldData.formObj[m.key[0]]))?JSON.parse(JSON.stringify(oldData.formObj[m.key[0]])):'请选择开始时间'}}
									</view>
									<u-icon name="arrow-down-fill" size="14"></u-icon>
								</view>
								<view class="thsj" @click="showTimePickFun(2,m.key[1])">
									<view
										style="display: flex;align-items: center;line-height: 60rpx;color: #828282;font-size: 26rpx;">
										<u-icon name="order" size="28"></u-icon>
										{{JSON.parse(JSON.stringify(oldData.formObj[m.key[1]]))?JSON.parse(JSON.stringify(oldData.formObj[m.key[1]])):'请选择结束时间'}}
									</view>
									<u-icon name="arrow-down-fill" size="14"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="submit_btn">
					<u-button :hairline="true" text="重置" @click="refresh"></u-button>
					<u-button customStyle="background: #4070FF;color: #fff;" :hairline="true" text="确定" @click="sure">
					</u-button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		junjunDetepicker
	} from '@/components/junjun-detepicker/junjun-detepicker.vue'
	export default {
		data() {
			return {
				showTimePick1: false,
				showTimePick2: false,
				timeType: 1,
				key1: "",
				key2: "",
				oldData: null,
			}
		},
		mounted() {
			this.oldData = JSON.parse(JSON.stringify(this.params))
			console.log(this.oldData, "this.oldDatathis.oldDatathis.oldData")
		},
		props: {
			params: {
				type: Object,
				default: () => {
					return {
						formObj: {}, //form[key]
						other: [],
					}
				}
			},
			format: {
				type: String,
				default: 'yyyy-MM-dd hh:mm:ss',
			},
			fixed: {
				type: Boolean,
				default: true,
			},
			showSearch: {
				type: Boolean,
				default: false,
			},
			showSearch1: {
				type: Boolean,
				default: false,
			},
		},
		watch: {
			params: {
				handler(newData, oldData) {
					this.oldData = JSON.parse(JSON.stringify(newData))
				},
				immediate: true,
				deep: true,
			}
		},
		methods: {
			close() {
				this.$emit('close', false)
			},
			showTimePickFun(type, key) {
				console.log(key)
				if (type == 2) {
					if (!this.oldData.formObj[this.key1]) return uni.showToast({
						title: "请选择开始时间",
						icon: "none"
					})
					this.showTimePick2 = true;
					this.timeType = 2
					this.key2 = key
				} else {
					this.showTimePick1 = true;
					this.timeType = 1
					this.key1 = key
				}

			},
			input(event, k) {
				console.log(event)
				/* let str = this.oldData.formObj[event]
				console.log(event,this.oldData.formObj[event],)
				if(str.indexOf('-')>-1 || str.indexOf('.')>-1){
					this.oldData.formObj[event] = str.slice(0,str.indexOf('-'))
				}
				console.log(event,this.oldData.formObj[event],)
				this.$forceUpdate() */
			},
			// 获取选择时间
			getTime(t) {
				console.log('----', t);
				if (this.timeType == 1) {
					console.log(this.oldData.formObj[this.key2], "22222")
					if (this.oldData.formObj[this.key2]) {
						let flag = this.$Common.compareTime(t.format, this.oldData.formObj[this.key2])
						console.log(flag, "flag")
						if (flag >= 0) {
							this.oldData.formObj[this.key1] = t.format
						} else {
							uni.showToast({
								title: "结束时间应大于开始时间",
								icon: "none"
							})
						}
					} else {
						this.oldData.formObj[this.key1] = t.format
					}
				} else {
					let flag = this.$Common.compareTime(this.oldData.formObj[this.key1], t.format)
					console.log(flag, "flag")
					if (flag >= 0) {
						this.oldData.formObj[this.key2] = t.format
					} else {
						uni.showToast({
							title: "结束时间应大于开始时间",
							icon: "none"
						})
					}
				}
			},
			sure() {
				this.$emit("sureSubmit", this.oldData.formObj)
			},
			refresh() {
				// debugger
				console.log(this.oldData.formObj, 111)

				for (let i in this.oldData.formObj) {
					if (typeof this.oldData.formObj[i] == "string") {
						this.oldData.formObj[i] = "";
						console.log(222)
					} else if (typeof this.oldData.formObj[i] == "number") {
						this.oldData.formObj[i] = "";
					} else if (typeof this.oldData.formObj[i] == "object") {
						this.oldData.formObj[i] = [];
					}
				}
				console.log(this.oldData.formObj, 33)
				setTimeout(() => {
					this.$forceUpdate()
				}, 100)
			},
			// 按钮点击
			nature(data, key) {
				if (!data) {
					this.oldData.formObj[key] = ""
				} else {
					this.oldData.formObj[key] = data
				}
				this.$forceUpdate()
			},
			// 按钮点击
			nature1(data, key) {
				console.log(data, key)
				if (!data) {
					this.oldData.formObj[key] = ""
				} else {
					if (this.oldData.formObj[key].indexOf(data) > -1) {
						if (this.oldData.formObj[key] == data) return
						this.oldData.formObj[key] = this.oldData.formObj[key].replace(data, "")
					} else {
						this.oldData.formObj[key] += data
					}

				}
				this.$forceUpdate()
			},

		}
	}
</script>
<style lang="scss" scoped>
	.search-fixed {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
	}

	.search_box {
		width: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: flex-end;

		/deep/ .my_search_btn {
			display: inline-block;
			min-width: 132rpx;
			padding: 0 24rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 24rpx;
			text-align: center;
			margin: 0;
			border: none;
		}

		/deep/ .search_btns {
			margin: 18rpx 0 0 0;
			display: flex;
			flex-wrap: wrap;

			.my_search_btn {
				margin-right: 8rpx;
				margin-bottom: 18rpx;
			}
		}
	}

	.search_box_transform {
		transform: translateX(0) !important;
		transition-duration: 300ms !important;
	}

	.search_child_box {
		background: #fff;
		width: 80%;
		min-height: 100vh;
		overflow: auto;
		transform: translateX(100%);
		transition-duration: 300ms;
		font-weight: bold;
		font-size: 28rpx;
		position: relative;
		padding-bottom: calc(2rpx + env(safe-area-inset-bottom));
		padding-bottom: calc(2rpx + constant(safe-area-inset-bottom));

		/deep/ .submit_btn {
			display: flex;
			width: 100%;
			position: absolute;
			bottom: 0;
			padding-bottom: calc(2rpx + env(safe-area-inset-bottom));
			padding-bottom: calc(2rpx + constant(safe-area-inset-bottom));

			/deep/ .u-button {
				flex: 1;
				height: 80rpx;
				font-weight: 400;
				font-size: 34rpx;
			}
		}
	}

	.search_title {
		color: #333;
		border-left: 6rpx solid #4070FF;
		font-size: 28rpx;
		line-height: 28rpx;
		padding-left: 12rpx;
		margin: 32rpx;
	}

	.search_main {
		width: 100%;
		border-top: 1rpx solid #ebecef;
		padding: 32rpx 32rpx 0;
		color: #333;
		font-size: 28rpx;
		font-weight: 400;

		.thsc {
			display: flex;
			align-items: center;
			line-height: 60rpx;
			margin: 24rpx 0;
		}

		.ipt {
			width: 132rpx;
			height: 60rpx;
			background: #F5F6FA;
			margin-right: 10rpx;
			text-align: center;
			font-size: 24rpx;
		}

		.content_box {
			display: flex;
			margin: 16rpx 0;
			flex-direction: column;
		}

		.thsj {
			display: flex;
			justify-content: space-between;
			background: #F5F6FA;
			height: 60rpx;
			padding: 0 24rpx;
		}

		.thsj:first-child {
			margin: 0 0 24rpx 0;
		}

		.leng_ipt {
			height: 60rpx;
			background: #F5F6FA;
			font-size: 24rpx;
			padding-left: 24rpx;
		}
	}
</style>
